<template>
  <div class="video-player">
    <!-- 视频元素 -->
    <video
      ref="videoRef"
      class="video-element"
      :src="src"
      :poster="poster"
      @timeupdate="updateProgress"
      @loadedmetadata="onLoadedMetadata"
      @play="isPlaying = true"
      @pause="isPlaying = false"
      @ended="onVideoEnded"
    ></video>

     </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const props = defineProps({
  src: { type: String, required: true },
  poster: { type: String, required: true },
});

onMounted(()=>{
  console.log(props.src)
})
const videoRef = ref(null);
const isPlaying = ref(false);
const duration = ref(0);
const currentTime = ref(0);
const progress = ref(0);
const volume = ref(1);

// 格式化时间（秒 → 00:00）
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
};

// 播放/暂停切换
const togglePlay = () => {
  if (isPlaying.value) {
    videoRef.value.pause();
  } else {
    videoRef.value.play();
  }
};

// 更新进度条
const updateProgress = () => {
  currentTime.value = videoRef.value.currentTime;
  progress.value = (currentTime.value / duration.value) * 100;
};

// 加载视频元数据（总时长）
const onLoadedMetadata = () => {
  duration.value = videoRef.value.duration;
};

// 跳转到指定时间
const seekVideo = (e) => {
  const pos = e.type === "click" ?
    (e.offsetX / e.target.clientWidth) * duration.value :
    parseFloat(e.target.value);
  videoRef.value.currentTime = pos;
  currentTime.value = pos;
};

// 视频结束回调
const onVideoEnded = () => {
  isPlaying.value = false;
};

// 全屏切换（可选）
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    videoRef.value.requestFullscreen().catch(console.error);
  } else {
    document.exitFullscreen();
  }
};

// 更新音量
const updateVolume = () => {
  videoRef.value.volume = volume.value;
};

// 组件卸载时清理
onBeforeUnmount(() => {
  if (isPlaying.value) {
    videoRef.value.pause();
  }
});
</script>

<style scoped>
.video-player {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #000;
}

.video-element {
  width: 100%;
  display: block;
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
}

.control-btn {
  padding: 5px 10px;
  background: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.progress-container {
  flex: 1;
  height: 10px;
  background: #555;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.progress-bar {
  height: 100%;
  background: #f00;
  border-radius: 5px;
  transition: width 0.1s;
}

.progress-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.time {
  font-size: 14px;
  min-width: 80px;
  text-align: center;
}

.volume-control {
  width: 80px;
}

.volume-slider {
  width: 100%;
}
</style>
